
import { render, WeElement, define } from 'omi'
import './index.css'
import { get , getUiAndLogin } from '../../utils/util'
import api from '../../api/api'
//获取应用实例
const app = getApp()

define('page-index', class extends WeElement {
  config = {
    navigationBarTitleText: "庐山西海瑶池湾度假山庄"
  }
  data = {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    imageUrl: [require("../../images/zy-1.png"), require("../../images/zy-2.png")],
    indexNav: [
      { iconUrl: require("../../images/index/scenic_ticket.png"), title: "景点门票", url: '/pages/scenic/list/index' },
      { iconUrl: require("../../images/index/order_ticket.png"), title: "预约发票", url: '/pages/invoice/index' },
      { iconUrl: require("../../images/index/food.png"), title: "美食", url: '/pages/food/index/index' },
      { iconUrl: require("../../images/index/visitor_say.png"), title: "客人说", url: '/pages/guest/index' },
      { iconUrl: require("../../images/index/my_collection.png"), title: "我的收藏", url: '/pages/collect/index' },
    ],
    banner: [],            // 顶部轮播
    hot: [],               // 热销
    second: [],            // 首页第二行
    news: [],               // 推文
    speed: 10,             //滚动条速度
    org: 0,                //原位置    icon_title1:"",
    icon_title2: "",
    labaUrl: require("../../images/laba.png"),
    picture: require("../../images/index_pic4.jpg"),
    now_data: "",
    new_data: "",
    num: 1,
    isdata1: true,
    isdata2: true,
    date1: "",
    date2: "",
    year: "",
    month: "",
    day: "",
    after_now: 0,
    after_new: 0,
    time_section: "",
    diff: "共1晚",
    diff_arr1: 0,
    diff_arr2: 0,
  }

  //房间数减少
  sub = () => {
    this.data.num--;
    if (this.data.num <= 0) {
      this.data.num = 0;
      wx.showToast({
        title: '房间数至少为1间',
        icon: 'none',
        duration: 1000,
        mask: "true"
      })
    };
    this.update();
  }
  //房间数增加
  add = () => {
    this.data.num++;
    this.update();
  }

  //跳转附页
  toattached = (e) => {
    console.log(e.currentTarget.dataset.url)
    wx.navigateTo({
      url: './components/index_page?target_url=' + e.currentTarget.dataset.url
    })
  }
  //跳转商城页
  toshopping_mall = () => {
    wx.switchTab({
      url: '../shopping_mall/index/index'
    })
  }
  //日期选择器开关
  section_data = () => {
    this.data.isdata = false;
    this.update();
  }
  //输出入住日期
  bindDateChange1 = (e) => {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    console.log(e.detail.value.split("-"));
    let date_arr1 = e.detail.value.split("-");
    this.data.diff_arr1 = (date_arr1[1] - this.data.month) * 30 + (date_arr1[2] - this.data.day);

    if (this.data.month != date_arr1[1] || this.data.day != date_arr1[2]) {
      this.data.after_now = this.data.diff_arr1 + "天后";
    }

    this.data.date1 = date_arr1[1] + "月" + date_arr1[2] + "日";

    this.data.diff = this.data.diff_arr2 - this.data.diff_arr1;
    this.data.diff <= 0 ? this.data.diff = "选择离店时间" : this.data.diff = "共" + this.data.diff + "晚";

    this.data.isdata1 = false;
    this.update();
  }
  //输出离店日期
  bindDateChange2 = (e) => {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    console.log(e.detail.value.split("-"));
    let date_arr2 = e.detail.value.split("-");
    this.data.diff_arr2 = (date_arr2[1] - this.data.month) * 30 + (date_arr2[2] - this.data.day);

    if (this.data.month != date_arr2[1] || this.data.day != date_arr2[2]) {
      this.data.after_new = this.data.diff_arr2 + "天后";
    }

    this.data.date2 = date_arr2[1] + "月" + date_arr2[2] + "日";

    this.data.diff = this.data.diff_arr2 - this.data.diff_arr1;
    this.data.diff <= 0 ? this.data.diff = "选择离店时间" : this.data.diff = "共" + this.data.diff + "晚";

    this.data.isdata2 = false;
    this.update();
  }

  onShareAppMessage() {
    return {
      title: '分享标题',
      path: '/pages/index/index?id=123',
      // imageUrl: require('./share.jpg'),
      success: (res) => {
        console.log("转发成功", res);
      },
      fail: (res) => {
        console.log("转发失败", res);
      }
    }
  }
  //获取当前时间戳
  getday() {
    this.data.year = new Date().getFullYear();
    this.data.month = new Date().getMonth() + 1;
    this.data.day = new Date().getDate();
    //时间选择器开始时间
    this.data.time_section = this.data.year + "-" + this.data.month + "-" + this.data.day;

    this.data.day<10?this.data.day=("0"+this.data.day):"";
    this.data.now_data = "0" + this.data.month + "月" + this.data.day + "日";
    this.data.new_data = "0" + this.data.month + "月" + (this.data.day + 1) + "日";
  }
  // 截获用户滑动
  catchTouchMove = (e) => {
    // console.log(e);
    return false
  }

 

  onShow() {
  
  }

  install() {
    this.getday();
    console.log(this);

    if (app.globalData.userInfo) {
      this.data.userInfo = app.globalData.userInfo
      this.data.hasUserInfo = true
      this.update()
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.data.userInfo = res.userInfo
        this.data.hasUserInfo = true
        this.update()
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.data.userInfo = res.userInfo
          this.data.hasUserInfo = true
          this.update()
        }
      })
    }

    //请求首页信息
    get(api.home).then((res) => {
      console.log("res", res);
      this.data.hot = res.data.recommend;
      this.data.banner = res.data.top;
      this.data.second = res.data.second;
      this.data.news = res.data.news;
      this.update();
    }).catch((err) => {
      console.log(err);
    })
    
   this.update();
  }

  getUserInfo = (evt) => {
    
    getUiAndLogin(evt.detail,app, ()=>{
      this.data.userInfo = evt.detail.userInfo
      this.data.hasUserInfo = true
      wx.navigateTo({ url: evt.currentTarget.dataset.url  })
      
    }) ;
    this.update()
  }
  //  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
  render() {
    const { banner, second, news, hot, org } = this.data
    return (
      <view class="index_body">
      {/* 轮播 */}
      <swiper  indicator-dots={true} autoplay={true} >
        { banner.map((item,index)=>
          <swiper-item class="index_title" key={item.scenic_id} >  
              <navigator class='a' url={`../scenic/inner/index?scenic_id=${item.scenic_id}`}>
              <image src={item.full_carousel}/>
            </navigator>
          </swiper-item>
        )}
      </swiper>  
      {/* 搜索 */}
        <view class="index_content">
          <view class="booking">
            <view class="booking_time">{diff}</view>

            <view class="booking_style">
              <view class="booking_left">入住</view>
              <view class="booking_right">离店</view>
            </view>

            <view class="booking_style black underline">
              <view class="booking_left" bindtap="section_data" >
                <picker
                  mode="date"
                  value="{date}"
                  start={time_section}
                  end="2020-09-01"
                  bindchange="bindDateChange1"
                >
                  <view class="picker">
                    {isdata1 ? now_data : date1}
                  </view>
                </picker>
                <view class="time_detail">{isdata1 ? "今天" : after_now}</view></view>


              <view class="booking_right">
                <view class="time_detail">{isdata2 ? "明天" : after_new}</view>
                <picker
                  mode="date"
                  value="{date2}"
                  start={time_section}
                  end="2020-09-01"
                  bindchange="bindDateChange2"
                >
                  <view class="picker">
                    {isdata2 ? new_data : date2}
                  </view>
                </picker>
              </view>
            </view>
            <view class="booking_style  underline">
              <view class="booking_left">房间数量</view>
              <view class="booking_right">
                <view class="sub" bindtap="sub" >-</view>
                <view class="num">{num}</view>
                <view class="add" bindtap="add">+</view>
              </view>
            </view>
            <view class="booking_style ">
              <view class="rightnow" bindtap="toshopping_mall" >立即预定</view>
            </view>
          </view>
        </view>
        <view class="travel_box">
          {second.map((item, index) =>
            <view class="travel_pic" key={item.scenic_id} >
              <navigator class='a' url={`../scenic/inner/index?scenic_id=${item.scenic_id}`}>
                <image src={item.full_carousel} />
              </navigator>
            </view>
          )}
        </view>
        {/* 首页导航 */}
        <view class='travel_jump'>
            {/* 景区 */}
            <navigator  class="icon_item" url={indexNav[0].url} >
              <view class="icon"><image src={indexNav[0].iconUrl}/></view>
              <view class="ders">{indexNav[0].title}</view>
            </navigator>

            { app.globalData.access_token?
            <navigator  class="icon_item" url={indexNav[1].url} >
              <view class="icon"><image src={indexNav[1].iconUrl}/></view>
              <view class="ders">{indexNav[1].title}</view>
            </navigator>
            : <button open-type="getUserInfo"  bindgetuserinfo="getUserInfo"  class="icon_btn" data-url={indexNav[1].url} >
              <view class="icon"><image src={indexNav[1].iconUrl}/></view>
              <view class="ders">{indexNav[1].title}</view>
            </button> }



            <navigator  class="icon_item" url={indexNav[2].url} >
              <view class="icon"><image src={indexNav[2].iconUrl}/></view>
              <view class="ders">{indexNav[2].title}</view>
            </navigator>
            <navigator  class="icon_item" url={indexNav[3].url} >
              <view class="icon"><image src={indexNav[3].iconUrl}/></view>
              <view class="ders">{indexNav[3].title}</view>
            </navigator>
            <navigator  class="icon_item" url={indexNav[4].url} >
              <view class="icon"><image src={indexNav[4].iconUrl}/></view>
              <view class="ders">{indexNav[4].title}</view>
            </navigator>
        </view>

        {/* 滚动推文 */}
        <view class="tweets">
          <view class="laba" > <image src={labaUrl} /> </view>

          <swiper class="news" indicator-dots={false} autoplay={true} circular={true} duration="1800">
          {
            news.map((item, index) =>
            <swiper-item catchtouchmove='catchTouchMove'>
              <navigator class="gz_cont"  url={`../outhtml/outhtml?url=${item.url}`} key={item.id}>
                <view class="zhu" >{item.title}</view>
              </navigator>
</swiper-item>
            )}
</swiper>
        </view>

        {/* <web-view src={item.url}></web-view>*/}
        {/* 热销商品 */}
        <view class="project">
          {
            hot.map((item, index) =>
              hot ?
                <navigator class="proj_item" key={index}  url={`../shopping_mall/shopping_details/details?commo_id=${item.goods_commonid}`}  >
                  <view class="picture"> <image src={item.goods_image} /></view>

                  <view class="pro_cont">
                    <view class="pro_title">{item.goods_name}</view>
                    <view class="price_box">
                      <view class="pro_price">￥{item.goods_price}</view>
                      <view class="pro_num">{item.goods_commonid}份</view>
                    </view>
                  </view>
                </navigator> : ""
            )}
        </view>

      </view>
    )
  }
})

